module.exports = {
    // 饼图
    apex_pie(series, labels) {
        return {
            series,
            chartOptions: {
                chart: {
                    width: 380,
                    type: 'pie',
                },
                colors: ['#95a2ff99', '#fa808099', '#ffc07699', '#fae76899', '#87e88599', '#3cb9fc99', '#73abf599', '#cb9bff99', '#43434899', '#90ed7d99', '#f7a35c99', '#8085e999'],
                fill: {
                    type: "gradient",
                    gradient: {
                        // enabled: true,
                        shade: "dark",
                        type: "vertical",
                        shadeIntensity: 0.5,
                        // gradientToColors: ['#95a2ff99', '#fa808099', '#ffc07699', '#fae76899', '#87e88599', '#3cb9fc99', '#73abf599', '#cb9bff99', '#43434899', '#90ed7d99', '#f7a35c99', '#8085e999'],
                        gradientToColors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348', '#90ed7d', '#f7a35c', '#8085e9'],
                        inverseColors: false,
                        opacityFrom: 1,
                        opacityTo: 1,
                        stops: [0, 100],
                    },
                },
                labels,
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            },


        }
    },
    // 纵向柱状图
    apex_bar(series, labels, seriesname, unit = "") {
        return {
            series: [{
                data: series,
                itemStyle: {
                    normal: {
                        color: "#7367F0",
                    },
                },
                name: seriesname
            }],
            chartOptions: {
                chart: {
                    type: 'bar',
                    height: 350
                },
                colors: ['#7367F0'],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        borderRadius: 4,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: labels,
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return val + unit
                        }
                    }
                }
            },
        }
    },
    // 宫格图
    apex_treemap(series) {
        return {
            chartOptions: {
                legend: {
                    show: false,
                },
                chart: {
                    height: 350,
                    type: "treemap",
                },
                colors: ['#7367f0'],
                plotOptions: {
                    treemap: {
                        enableShades: true,
                        shadeIntensity: 0.5,
                        reverseNegativeShade: true,
                        // colorScale: {
                        //     ranges: [
                        //         {
                        //             from: 0,
                        //             to: 55,
                        //             color: "#9575CD",
                        //         },
                        //         {
                        //             from: 55.0001,
                        //             to: 1000,
                        //             color: "#FFCC80",
                        //         },
                        //     ],
                        // },
                    },
                },
            },
            series: [
                {
                    data: series,
                },
            ],
        }
    },
    // 运动环
    apex_radialBar(series, labels) {
        let sum = series.reduce((acc, cur) => {
            acc.sum += cur;
            return acc;
        }, { sum: 0 });

        let result = series.map((item) => {
            let percent = item / sum.sum * 100;
            return percent.toFixed(2);
        });
        return {
            chartOptions: {
                labels,
                plotOptions: {
                    radialBar: {
                        size: 165,
                        offsetY: 30,
                        hollow: {
                            size: "10%",
                        },
                        track: {
                            background: "#ebebeb",
                            strokeWidth: "100%",
                            margin: 15,
                        },
                        dataLabels: {
                            show: true,
                            name: {
                                fontSize: "18px",
                            },
                            value: {
                                fontSize: "16px",
                                color: "#636a71",
                                offsetY: 11,
                            },
                            total: {
                                show: true,
                                label: "Total",
                                formatter: function () {
                                    return series.reduce((acc, cur) => acc + cur, 0);
                                },
                            },
                        },
                    },
                },
                responsive: [
                    {
                        breakpoint: 576,
                        options: {
                            plotOptions: {
                                radialBar: {
                                    size: 150,
                                    hollow: {
                                        size: "20%",
                                    },
                                    track: {
                                        background: "#ebebeb",
                                        strokeWidth: "100%",
                                        margin: 15,
                                    },
                                },
                            },
                        },
                    },
                ],
                colors: ["#7961F9", "#FF9F43", "#EA5455"],

                fill: {
                    type: "gradient",
                    gradient: {
                        // enabled: true,
                        shade: "dark",
                        type: "vertical",
                        shadeIntensity: 0.5,
                        gradientToColors: ["#9c8cfc", "#FFC085", "#f29292"],
                        inverseColors: false,
                        opacityFrom: 1,
                        opacityTo: 1,
                        stops: [0, 100],
                    },
                },
                stroke: {
                    lineCap: "round",
                },
                chart: {
                    dropShadow: {
                        enabled: true,
                        blur: 3,
                        left: 1,
                        top: 1,
                        opacity: 0.1,
                    },
                },
            },
            series: result,
        }
    },
    // 纵向柱状图
    apex_bar_horizontal(series, labels, seriesname, unit = "") {
        return {
            series: [{
                data: series,
                itemStyle: {
                    normal: {
                        color: "#7367F0",
                    },
                },
                name: seriesname
            }],
            chartOptions: {
                chart: {
                    type: 'bar',
                    height: 350
                },
                colors: ['#7367F0'],
                plotOptions: {
                    bar: {
                        horizontal: true,
                        borderRadius: 4,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: labels,
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return val + unit
                        }
                    }
                }
            },
        }
    },
    // 折线图
    apex_datetime_line(series, labels, seriesname) {
        var arr = labels
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i])
            var dateArr = arr[i].split("/"); // 将日期字符串按照“/”分割成数组
            console.log(dateArr)
            var year = dateArr[2]; // 取出年份
            var month = parseInt(dateArr[1]); // 取出月份并转换为数字
            console.log({ 'year': year, 'month': month })
            var monthStr = month < 10 ? "0" + month : month; // 如果月份小于10，则在前面加上0
            arr[i] = year + "年" + monthStr + "月"; // 将日期格式化为“yyyy年MM月”的形式
        }
        return {
            series: [{
                name: seriesname,
                data: series
            }],
            chartOptions: {
                chart: {
                    height: 350,
                    type: 'line',
                    zoom: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                // forecastDataPoints: {
                //     count: 7
                // },
                stroke: {
                    curve: 'smooth'
                },
                grid: {
                    row: {
                        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                        opacity: 0.5
                    },
                },
                xaxis: {
                    // type: "datetime",
                    tickAmount: 10,
                    categories: arr,
                },
                yaxis: {
                    tickAmount: 5,
                    labels: {
                        formatter: function (val) {
                            return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
                        }
                    }
                },
                tooltip: {
                    x: {
                        format: 'yyyy年M月',
                    }
                },
                tickAmount: 100,
                fill: {
                    type: "gradient",
                    gradient: {
                        shade: "dark",
                        gradientToColors: ["#786cf7"],
                        shadeIntensity: 1,
                        type: "horizontal",
                        opacityFrom: 1,
                        opacityTo: 0.5,
                        stops: [0, 100, 100, 100],
                    },
                },
            }
        }
    }
}